<template>
    <div class="_23qa_KJTLBPwGdXGWICVcF" style="min-height: 844px;">
        <div style="width: 100%; height: 50px; position: relative; touch-action: none; z-index: 1;">
            <div
                style="height: 100%; background: rgb(255, 255, 255); font-weight: 600; font-size: 17.68px; color: rgb(34, 36, 38);">
                <div class="_2EMaVEYRy1EslD-dh3AINT _35znmbDbko7fIpUGCq5El2" style=" background: rgb(227 87 87);">
                    <a href="http://localhost:5173/#/profile" class="ZxOwDLMiwnQcGAjIpkYgI _2tZLpzZVl_ClneXvNiOANI">
                    </a>
                    <div>
                        <div class="_10IS5CBl842cc7onWGGb0h" style="padding: 18px 0px;">
                            <div class="_32hDoUxxT6lTP167bFknTs">美团红包</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="_3RfxcPSbwjPQs5fG9ZsqiZ"><span class="_9Ko1WP6qk3JXLXUZi7jPm">使用兑换码</span><span
                class="_1KXZgTWP7B49c-YgND_YtV">添加红包</span><span class="_2SgJ-Qh4xMm8pmeB2PSZFK"></span></p>
        <!-- 优惠券列表 -->
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
            @change="onChange" @exchange="onExchange" />
    </div>
</template>

<script>
import { createApp } from 'vue';
import { CouponList } from 'vant';

const app = createApp();
app.use(CouponList);

import { ref } from 'vue';

export default {
    setup() {
        const coupon = {
            available: 1,
            condition: '满49可用',
            reason: '',
            value: 150,
            name: '免配红包·最高抵10元',
            startAt: 1489104000,
            endAt: 1514592000,
            valueDesc: '￥10',
            unitDesc: '元',
        };

        const coupons = ref([coupon]);
        const showList = ref(false);
        const chosenCoupon = ref(-1);

        const onChange = (index) => {
            showList.value = false;
            chosenCoupon.value = index;
        };
        const onExchange = (code) => {
            coupons.value.push(coupon);
        };

        return {
            coupons,
            showList,
            onChange,
            onExchange,
            chosenCoupon,
            disabledCoupons: [coupon],
        };
    },
};

</script>

<style lang="scss" scoped>
._2EMaVEYRy1EslD-dh3AINT {
    height: 50px;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 5;
}

._2EMaVEYRy1EslD-dh3AINT ._2tZLpzZVl_ClneXvNiOANI {
    background: url() no-repeat;
    background-size: 20% 30%;
    background-position: center;
}

._2EMaVEYRy1EslD-dh3AINT .ZxOwDLMiwnQcGAjIpkYgI {
    width: 40px;
    height: 50px;
    background: url() no-repeat;
    background-size: 2vw 4vw;
    background-position: bottom 3.6vw right 4.26666667vw;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

._2EMaVEYRy1EslD-dh3AINT ._10IS5CBl842cc7onWGGb0h {
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: center;
}

._35znmbDbko7fIpUGCq5El2 ._10IS5CBl842cc7onWGGb0h {
    max-width: 160px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-left: 0px !important;
}

._23qa_KJTLBPwGdXGWICVcF ._3RfxcPSbwjPQs5fG9ZsqiZ {
    background: #fff8e9;
    color: #666;
    width: 100%;
    text-align: left;
    line-height: 30px;
    font-size: 13px;
}

._23qa_KJTLBPwGdXGWICVcF ._3RfxcPSbwjPQs5fG9ZsqiZ ._9Ko1WP6qk3JXLXUZi7jPm {
    margin-left: 20px;
}

._23qa_KJTLBPwGdXGWICVcF ._3RfxcPSbwjPQs5fG9ZsqiZ ._1KXZgTWP7B49c-YgND_YtV {
    color: #466899;
    margin-left: 5px;
}

._23qa_KJTLBPwGdXGWICVcF ._3RfxcPSbwjPQs5fG9ZsqiZ ._2SgJ-Qh4xMm8pmeB2PSZFK {
    display: inline-block;
    width: 8px;
    height: 10px;
    background: url();
    background-size: 100% 100%;
    position: relative;
    left: 5px;
    top: 1px;
}
</style>